<template>
  <div class="trn-nav">
    <div :style="`background:${propBackgroundColor || '#fff'};${nav_style}`" :class="`trn-nav-top ${propEnt || ''}`">
      <div v-if="(propTitle || null) != null" class="trn-nav-top-title single-text">{{ propTitle }}</div>
      <slot />
    </div>
  </div>
</template>

<script lang='ts' setup>
interface Props {
  propTitle?: string
  propBackgroundColor?: string
  propEnt?: string
  propScroll: number
  propHeight: number
}
const { propScroll, propHeight } = defineProps<Props>()
let statusbar_height = $ref(0)
let nav_style: any = $ref('')
watch(() => propScroll, (value, old_value) => {
  // opacity 0 就是完全透明  1是不透明
  let opacity = 0
  if (value >= 10 && value <= 20) {
    opacity = 0.2
  }
  // 越往下滑动 透明度越低
  if (value >= 20 && value <= 30) {
    opacity = 0.3
  }
  if (value >= 30 && value <= 40) {
    opacity = 0.5
  }
  if (value >= 40 && value <= 50) {
    opacity = 0.7
  }
  if (value >= 50 && value <= 60) {
    opacity = 1
  }
  if (value > 50) {
    opacity = 1
  }

  // 设置样式
  nav_style = `opacity:${opacity};`
  // #ifdef MP
  nav_style += `height:${propHeight + statusbar_height + 20}rpx;`
  // #endif
  // #ifdef H5
  nav_style += 'height:64px;'
  // #endif
})
onMounted(() => {
  // 获取系统状态栏高度
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  statusbar_height = menuButtonInfo.top
  // #endif
})
</script>

<style lang='scss' scoped>
.trn-nav{
  .trn-nav-top {
    padding-top: var(--status-bar-height);
    opacity: 0;
    width: 100%;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;

    .trn-nav-top-title {
      font-size: 36rpx;
      text-align: left;
      padding: 12px 250rpx 0 20rpx;
      height: 37px;
      color: #000;
    }
  }
}
</style>
